<template>
	<view class="result">
		<view class="" style="margin-top: 40rpx;">
			<view class="head" style="margin-top: 40rpx;">
				<view  @click="back" style="padding-top: 10rpx;"><u-icon name="arrow-left" color="#aa9c9f" size="60"></u-icon></view>
				<view class="input-box row">
					<text style="margin-right: 10rpx;"><u-icon name="search" size="40" color="#aa9c9f"></u-icon></text>
					<input 
						class="input"
						type="text" 
						placeholder="蓝月亮" 
						maxlength="20"
						v-model="keyword" 
						@confirm="search"
						confirm-type="search"
						@focus="back"
					/>
					<text v-if="keyword" class="mix-icon icon-guanbi2" @click="clearInput"></text>
				</view>
			</view>
			<view class="middle">
				<shop-list ></shop-list>
			</view>
		</view>
	</view>
</template>

<script>
	import shopList from '../../components/shopList/shopList.vue'
	export default{
		components:{
			shopList
		},
		data(){
			return{
				
			}
		},
		methods:{
			back(){
				uni.navigateTo({
					url:'/Shop/search/search'
				})
			}
		}
	} 
</script>

<style>
	.head{
		display: flex;
	}
	.input-box {
			width: 604rpx;
			height: 80rpx;
			border-radius: 100rpx;
			background: #f5f6f7;
		}
		.input{
			flex: 1;
			font-size: 30rpx;
			color: #333;
		}
		.icon-guanbi2{
			padding: 10rpx 20rpx;
			font-size: 32rpx;
			color: #999;
		}
		.search-btn {
			padding: 10rpx 20rpx;
			background-color:#FF9500  ;
			flex-shrink: 0;
			font-size: 32rpx;
		}
	
	.content {
		flex: 1;
		padding-top: 24rpx;
		border-radius: 28rpx 28rpx 0 0;
		background-color: #fff;
		
	}
	.s-header{
		height: 80rpx;
		padding: 0 32rpx 0 40rpx;
		
		.tit{
			flex: 1;
			font-size: 30rpx;
			color: #333;
			font-weight: 700;
		}
		.icon-lajitong{
			padding: 10rpx;
			font-size: 36rpx;
			color: #333;
		}
	}
	.list{
		display: flex;
		flex-wrap: wrap;
		padding: 10rpx 0 0 36rpx;
		}
		.item{
			min-width: 60rpx;
			height: 58rpx;
			padding: 0 24rpx;
			margin: 0 24rpx 24rpx 0;
			border-radius: 100rpx;
			background-color: #f5f6f7;
			font-size: 26rpx;
			color: #666;
		}
	
	.main{
		padding-top: 10rpx;
		background-color: #FFFFFF;
		}
		.head {
			width: 90%;
			margin: 30rpx auto;
			display: flex;
		}
		.rows {
			width: 95%;
			margin: auto;
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;
			}
</style>
